<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="renderer" content="webkit">
    <!-- TopJUI框架样式 -->
    <link type="text/css" href="../../topjui/themes/default/topjui.core.min.css" rel="stylesheet">
    <link type="text/css" href="../../topjui/themes/default/topjui.blue.css" rel="stylesheet" id="dynamicTheme"/>
    <!-- FontAwesome字体图标 -->
    <link type="text/css" href="../../static/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet"/>
    <!-- layui框架样式 -->
    <link type="text/css" href="../../static/plugins/layui/css/layui.css" rel="stylesheet"/>
    <!-- jQuery相关引用 -->
    <script type="text/javascript" src="../../static/plugins/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="../../static/plugins/jquery/jquery.cookie.js"></script>
    <!-- TopJUI框架配置 -->
    <script type="text/javascript" src="../../static/public/js/topjui.config.js"></script>
    <!-- TopJUI框架核心-->
    <script type="text/javascript" src="../../topjui/js/topjui.core.min.js"></script>
    <!-- TopJUI中文支持 -->
    <script type="text/javascript" src="../../topjui/js/locale/topjui.lang.zh_CN.js"></script>
    <!-- layui框架js -->
    <script type="text/javascript" src="../../static/plugins/layui/layui.js" charset="utf-8"></script>
</head>

<body>
<table data-toggle="topjui-datagrid"
       data-options="id:'productDg',
    url:'../../json/datagrid/product-list.json'">
    <thead>
    <tr>
        <th data-options="field:'id',title:'ID',checkbox:true"></th>
        <th data-options="field:'name',title:'商品名称'"></th>
        <th data-options="field:'code',title:'商品编号'"></th>
        <th data-options="field:'spec',title:'规格型号'"></th>
        <th data-options="field:'danwei',title:'规格型号'"></th>
        <th data-options="field:'sale_price',title:'销售单价'"></th>
    </tr>
    </thead>
</table>

<!-- 用户 表格工具栏 -->
<div id="productDg-toolbar" class="topjui-toolbar"
     data-options="grid:{
           type:'datagrid',
           id:'productDg'
       }">
    <a href="javascript:void(0)"
       data-toggle="topjui-menubutton"
       data-options="method:'openDialog',
       extend:'#productDg-toolbar',
       btnCls:'topjui-btn-green',
       dialog:{
           id:'formDialog',
           href:_ctx + '/html/complex/dialog_add.html',
           height:450,
           width:700,
           buttonsGroup:[
               {text:'保存',url: _ctx + '/json/response/success.json',iconCls:'fa fa-plus',handler:'ajaxForm'}
           ]
       }">表单窗口（新增）</a>

    <a href="javascript:void(0)"
       data-toggle="topjui-menubutton"
       data-options="method: 'openDialog',
            iconCls: 'fa fa-pencil',
            btnCls: 'topjui-btn-brown',
            grid: {
                type: 'datagrid',
                id: 'productDg'
            },
            dialog: {
                width: 950,
                height: 500,
                href: _ctx + '/html/complex/dialog_add.html',
                url: _ctx + '/json/datagrid/product-detail.json?uuid={uuid}',
                buttonsGroup: [
                    {
                        text: '更新',
                        url: _ctx + '/json/response/success.json',
                        iconCls: 'fa fa-save',
                        handler: 'ajaxForm',
                        btnCls: 'topjui-btn-green'
                    }
                ]
            }">表单窗口（编辑）</a>
    <!--自定义方法myEditDialog() 见页面最下方JavaScript代码-->
    <a href="javascript:void(0)"
       data-toggle="topjui-menubutton"
       data-options="extend:'#productDg-toolbar',
       iconCls:'fa fa-pencil',
       btnCls:'topjui-btn-blue',
       onClick:myEditDialog">自定义窗口(编辑)</a>
    <a href="javascript:void(0)"
       data-toggle="topjui-menubutton"
       data-options="method:'openDialog',
       btnCls:'topjui-btn-orange',
       dialog:{
           id:'dialog1',
           href:_ctx + '/html/menu/grid.html',
           width: 1100,
           height: 600,
           buttonsGroup:[
               {text:'保存',url: _ctx + '/json/response/success.json',iconCls:'fa fa-plus',handler:'ajaxForm'}
           ]
       }">表格窗口</a>
    <a href="javascript:void(0)"
       data-toggle="topjui-menubutton"
       data-options="method:'doAjax',
       extend: '#productDg-toolbar',
       btnCls:'topjui-btn-brown',
       iconCls:'fa fa-trash',
       confirmMsg:'这个是勾选复选框实现多条数据的Ajax删除提交操作，提交grid.param中指定的参数值',
       grid: {uncheckedMsg:'请先勾选要删除的数据',param:'uuid:uuid,code:code',updateRow:true},
       url:_ctx + '/json/response/success.json'">批量处理（删除）</a>
    <!--自定义方法delete() 见页面最下方JavaScript代码-->
    <a href="javascript:void(0)"
       data-toggle="topjui-menubutton"
       data-options="
       btnCls:'topjui-btn-purple',
       iconCls:'fa fa-trash',
       onClick:deleteRows">自定义处理（批量删除）</a>
    <a href="javascript:void(0)"
       data-toggle="topjui-menubutton"
       data-options="menu:'#exportSubMenu',
       btnCls:'topjui-btn-blue',
       hasDownArrow:true,
       iconCls:'fa fa-list'">更多</a>
    <div id="exportSubMenu" style="width:200px;" data-options="onClick:menuHandler">
        <div data-options="method:'openDialog',
       extend:'#productDg-toolbar',
       btnCls:'topjui-btn-green',
       iconCls:'fa fa-file-text-o',
       dialog:{
           id:'formDialog',
           href:_ctx + '/html/complex/dialog_add.html',
           height:450,
           width:700,
           buttonsGroup:[
               {text:'保存',url: _ctx + '/json/response/success.json',iconCls:'fa fa-plus',handler:'ajaxForm'}
           ]
       }">表单窗口（新增）
        </div>
        <div data-options="method: 'openDialog',
            id:'ddd',
            iconCls: 'fa fa-pencil',
            grid: {
                type: 'datagrid',
                id: 'productDg'
            },
            dialog: {
                width: 950,
                height: 500,
                href: _ctx + '/html/complex/dialog_add.html',
                url: _ctx + '/json/datagrid/product-detail.json?uuid={uuid}',
                buttonsGroup: [
                    {
                        text: '更新',
                        url: _ctx + '/json/response/success.json',
                        iconCls: 'fa fa-save',
                        handler: 'ajaxForm',
                        btnCls: 'topjui-btn-green'
                    }
                ]
            }">表单窗口（编辑）
        </div>
        <div data-options="
            id:'ddd',
            iconCls: 'fa fa-pencil',
            handler: myEditDialog
           ">自定义窗口
        </div>
        <div
                data-options="method:'openDialog',
       btnCls:'topjui-btn-orange',
        iconCls:'fa fa-file-text-o',
       dialog:{
           id:'dialog1',
           href:_ctx + '/html/menu/grid.html',
           width: 1100,
           height: 600,
           buttonsGroup:[
               {text:'保存',url: _ctx + '/json/response/success.json',iconCls:'fa fa-plus',handler:'ajaxForm'}
           ]
       }">表格窗口
        </div>
        <!--自定义方法delete() 见页面最下方JavaScript代码-->
        <div
                data-options="method:'doAjax',
       extend: '#productDg-toolbar',
       btnCls:'topjui-btn-brown',
       iconCls:'fa fa-trash',
       confirmMsg:'这个是勾选复选框实现多条数据的Ajax删除提交操作，提交grid.param中指定的参数值',
       grid: {uncheckedMsg:'请先勾选要删除的数据',param:'uuid:uuid,code:code',updateRow:true},
       url:_ctx + '/json/response/success.json'">批量处理（删除）
        </div>
        <div data-options="
        btnCls:'topjui-btn-purple',
        iconCls:'fa fa-trash',
        handler: deleteRows">
            自定义处理（批量删除）
        </div>
    </div>

</div>
<script>
  /**
   * @description 自定义弹出窗口方法
   */
  function myEditDialog() {
    // 1. 拿到表格选中行数据
    var selectedRow = $("#productDg").iDatagrid("getSelected");
    if (!selectedRow) {
      return $.iMessager.alert('操作提示', '请选中需要编辑的数据行！', 'messager-error'); // 消息窗口
    }
    // 2. 创建form表单元素
    var $myDialog = $('<form method="post"></form>');

    // 3. 创建弹出窗口
    $myDialog.iDialog({
      id: 'myDialog',// 唯一标识id
      title: '自定义打开一个窗口',// 标题
      closed: false, // 关闭状态
      height: 450, // 高度
      width: 700, // 宽度
      href: _ctx + '/html/complex/dialog_add.html', // 加载页面元素的地址
      buttons: [
        {text: '自定义保存', iconCls: 'fa fa-plus', btnCls: 'topjui-btn-green', handler: ajaxSubmit},//'自定义保存'调用下面ajaxSubmit方法
        {text: '自定义关闭', iconCls: 'fa fa-no', btnCls: 'topjui-btn-red', handler: closeMyDialog}//'自定义关闭'调用下面closeMyDialog方法
      ],
      onLoad: function () {
        $myDialog.iForm('load', selectedRow) //加载表单数据
      }
    });
  }

  /**
   * @description '自定义保存'点击事件触发的方法
   */
  var ajaxSubmit = function () {
    // 1. 显示进度条（提交时请使用进度条 或者 禁用'提交'按钮，防止因为网络延迟用户重复提交）
    $.iMessager.progress({'text': '请求中……'});

    // 2. 提交操作
    $('#myDialog').iForm('submit', {
      url: _ctx + '/json/response/success.json',
      onSubmit: function (param) {  /* param.p1 = 'param 用于提交额外的参数';*/
        var isValid = $(this).iForm('validate'); //  提交数据表单数据时进行表单验证
        if (!isValid) {
          $.iMessager.progress('close');  // 如果表单是无效的则隐藏进度条
        }
        return isValid;    // 返回false终止表单提交
      },
      success: function (res) {
        var data = JSON.parse(res); // 字符串格式JSON 转换成 对象格式JSON
        setTimeout(function () { // 模拟请求延迟3秒（使用的时候请自行去掉）
          if (data.statusCode == 200) { // 后台返回状态值
            $.iMessager.show({title: '我的消息', msg: data.message, timeout: 5000, showType: 'slide'});// '消息窗口'组件
            $("#productDg").iDatagrid('reload');// 刷新下表格数据
            $('#myDialog').dialog('destroy');// 销毁dialog面板
          } else {
            $.iMessager.show({title: '我的消息', msg: data.message, timeout: 5000, showType: 'slide'});// '消息窗口'组件
          }
          $.iMessager.progress('close');  // 如果提交完成则隐藏进度条
        }, 3000);
      }
    });
  }

  /**
   * @description  '自定义关闭'点击事件触发的方法
   */
  var closeMyDialog = function () {
    $('#myDialog').dialog('close');// 关闭dialog窗口
    $('#myDialog').dialog('destroy');// 销毁dialog面板
  };

  /**
   * @description  '自定义处理（批量删除）'点击事件触发的方法
   * @returns {*}
   */
  var deleteRows = function () {
    // 1. 获取所有选中行信息
    var selectedRows = $("#productDg").iDatagrid("getChecked");
    if (selectedRows.length == 0) {
      return $.iMessager.alert('操作提示', '未勾选需要删除的数据行！', 'messager-error'); // 消息窗口
    }

    // 2. 调用窗口组件进行二次安全确认
    $.iMessager.confirm('确认对话框', '您确定删除所选的' + selectedRows.length + '条数据？', function (r) {//r为true时表示确认删除
      if (r) {
        // 3. 将需要删除数据的唯一标识存入数组
        var uuids = [];
        $.each(selectedRows, function (index) {
          uuids.push(selectedRows[index].uuid);
        });
        // 4.发送删除请求
        var url = _ctx + '/json/response/failure.json'; // 请求地址
        var postData = {uuid: uuids.join(',')}; // 请求携带的JSON数据,并定义数据里面uuid用","分割
        $.post(url, postData, function (res) {
          if (res.statusCode = 200) {
            $.iMessager.show({title: '我的消息', msg: res.message, timeout: 5000, showType: 'slide'});// '消息窗口'组件
            $("#productDg").iDatagrid('reload') // 成功后刷新数据表格
          } else {
            $.iMessager.show({title: '我的消息', msg: res.message, timeout: 5000, showType: 'slide'});// '消息窗口'组件
          }

        },'JSON')
      }
    });
  }
</script>
</body>
</html>
